<script setup lang="ts">
	import { ref, nextTick, computed } from 'vue'
	import GameBtn from '@/wxcomponents/game-btn'

	defineProps<{
		data : [],
		products : [],
		detail : null,
		emits : ['share']
	}>()

	const indicatorDots = ref(false)
	const autoplay = ref(true)
	const interval = ref(2000)
	const duration = ref(500)

	const current = ref(0)
	const currentOld = ref(0)

	function onSwipeChange(evt) {
		currentOld.value = current.value
		current.value = evt.detail.current;
	}

	async function clickDot(index) {
		current.value = currentOld.value
		await nextTick()
		current.value = index
	}

	function gotoPackage() {
		uni.navigateTo({
			url: '/pages/package/Cindex'
		})
	}
</script>

<template>
	<view class="products-swiper">
		<view class="bg-wrapper">
			<swiper class="swiper" circular :autoplay="autoplay" @change="onSwipeChange">
				<swiper-item v-for="(item, index) in data" :key="index">
					<template :key="index">
						<view class="swiper-item">
							<image class="img" :src="item.main_photo" mode="widthFix" />
							
						</view>
					</template>
				</swiper-item>
			</swiper>
			<view class="product-left-zone">
				<scroll-view scroll-y="true" style="height: 104px;" class="scrollewidth">
					<view v-for="(item, index) in products" :key="index" class="txt-content">
						{{ item.name }} {{ item.stock }}/{{ item.count }}
					</view>
				</scroll-view>
			</view>
			<view class="product-right-zone">
				<game-btn icon="share" label="分享" @click="$emit('share')" />
				<game-btn icon="carriage" label="车厢" @click="gotoPackage" />
			</view>
		</view>
		<!-- custom swiper dots -->
		<view class="swiper-bottom">
			<view class="custom-dots-wrapper">
				<view class="custom-dot" :class="index === current ? 'active': ''" v-for="(item, index) in info"
					:key="index" @click="() => clickDot(index)" />
			</view>
		</view>
	</view>
</template>

<style scoped>
	.products-swiper {
		height: auto;
		position: relative;
		padding-bottom: 14px;
	}

	.products-swiper .bg-wrapper {
		margin: 0 auto;
		background-image: url('https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/swiper-2-border.png');
		background-size: contain;
		background-repeat: no-repeat;
		width: 100%;
		aspect-ratio: 351/142;
		margin-top: 12px;
		position: relative;
	}

	.swiper-bottom {
		position: absolute;
		width: 100%;
		bottom: 0px;
		display: flex;
		justify-content: space-around;
	}

	.custom-dots-wrapper {
		display: flex;
		align-items: center;
		gap: 4px;
		width: auto;
	}

	.custom-dot {
		width: 8px;
		height: 5px;
		background: #5E5E5E;
		border-radius: 7px;
	}

	.custom-dot.active {
		width: 20px;
		height: 5px;
		background: linear-gradient(150deg, #2F76EC 0%, #D85AE7 100%);
	}

	.products-swiper .swiper {
		height: 100%;
	}

	.swiper-item {
		display: block;
		height: 152px;
		line-height: 152px;
		text-align: center;
		padding-top: 10px;
		padding-left: 8px;
		padding-right: 8px;
		box-sizing: border-box;
		position: relative;
	}

	.swiper-item .img {
		width: 100%;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}

	.uni-bg-red {
		background-color: 'red';
	}

	.uni-bg-green {
		background-color: 'green';
	}

	.uni-bg-blue {
		background-color: 'blue';
	}

	.swiper-item {
		width: 100%;
		position: relative;
	}

	.scrollewidth {
		min-width: fit-content;
		text-align: left;
	}

	/* .swiper-item */
	.product-left-zone {
		position: absolute;
		top: 12px;
		left: 12px;
		bottom: 0px;
		height: 128px;
		/* overflow-y: auto; */
		min-width: fit-content;
		box-sizing: border-box;
		padding: 14px 10px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		background-color: rgba(0, 0, 0, 0.7);
		border-radius: 5px;
		justify-content: center;
		z-index: 333;
	}

	/* .swiper-item */
	.product-left-zone .txt-content {
		color: white;
		font-size: 10px;
		line-height: 15px;
	}

	.product-right-zone {
		position: absolute;
		height: 100%;
		bottom: 0px;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
	}
</style>